import { Component } from 'react';
import { globalStore } from '@/store';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { observer } from 'mobx-react';
// import { getShopList } from '@/service/apis/shop';
import ShopItem from './components/ShopItem/index';
import './list.scss';

class Index extends Component {
  state = {
    totalCount: 0,
    lat: 0,
    lng: 0,
    shopList: [],
    type: 'edit',
  };

  componentDidMount() {
    // this.getLocation();
    const querys = Taro.getCurrentInstance()?.router?.params;
    if (querys?.type) {
      this.setState({
        type: querys.type || 'edit',
      });
    }
  }

  getShopList = async () => {
    try {
      await globalStore.getCurrentShop();
      // this.setState({
      //   shopList: data.store_list,
      //   totalCount: data.store_list.length,
      // });
    } catch (err) {
      Taro.showToast({
        icon: 'none',
        title: err?.msg,
      });
    }
  };

  onShopChange = async (shop) => {
    if (this.state.type === 'view') {
      return false;
    }
    globalStore.updateShop(shop, true);
    Taro.showToast({
      title: '切换成功',
    });
    setTimeout(() => {
      Taro.navigateBack({});
    }, 2000);
  };

  getLocation = async () => {
    globalStore.getLocation(true).then(() => {
      globalStore.getCurrentShop(true);
    });
  };

  render() {
    const { type } = this.state;
    console.log('globalStore.shopList: ', globalStore.shopList);
    return (
      <View className="shop-container">
        <View className="shop-top">
          <View className="shop-container-title">
            所有门店<Text>({globalStore?.shopList?.length}家）</Text>
          </View>
          {type === 'edit' && (
            <View className="location" onClick={this.getLocation}>
              重新定位
            </View>
          )}
        </View>
        {globalStore.shopList.map((item) => {
          return (
            <ShopItem
              isSelected={globalStore.currentShop.id === item.id}
              key={item.id}
              shop={item}
              onChange={this.onShopChange}
              type={type}
            />
          );
        })}
      </View>
    );
  }
}

export default observer(Index);
